﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>在线聊天室</title>
    <style>
        * {
            box-sizing: border-box;
        }

        *:before,
        *:after {
            box-sizing: inherit;
        }

        body,
        html {
            height: 100%;
            overflow: hidden;
        }

        body,
        ul {
            margin: 0;
            padding: 0;
        }

        body {
            color: #4d4d4d;
            font: 14px/1.4em 'Helvetica Neue', Helvetica, 'Microsoft Yahei', Arial, sans-serif;
            background: #f5f5f5 url('${pageContext.request.contextPath}/other/qq/img/bg.jpg') no-repeat center;
            background-size: cover;
            font-smoothing: antialiased;
        }

        ul {
            list-style: none;
        }
    </style>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/other/qq/css/chat.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/other/qq/css/buttons.css">
</head>

<body>
<div id="app" _v-6f58f7a2="">
    <div class="sidebar" _v-6f58f7a2="">
        <div class="card" _v-7021c5b7="" _v-6f58f7a2="">
            <header _v-7021c5b7="">
                <img id="userImg" class="avatar" width="40" height="40" _v-7021c5b7="" alt="coffce" src="${pageContext.request.contextPath}/other/qq/img/0.jpg">
                <p id="userName" class="name" _v-7021c5b7=""></p>
            </header>
        </div>
        <div class="list" _v-7e56f776="" _v-6f58f7a2="">
            <ul _v-7e56f776="">
                <li _v-7e56f776="" class="active">
                    <img class="avatar" width="30" height="30" _v-7e56f776="" src="${pageContext.request.contextPath}/other/qq/img/3.jpg">
                    <p class="name" _v-7e56f776="">
                        在线聊天室
                    </p>
                </li>
            </ul>
        </div>
    </div>

    <div class="main" _v-6f58f7a2="">
        <div class="message" id="message" _v-b412eea0="" _v-6f58f7a2="">
            <ul _v-b412eea0="" id="recv"></ul>
        </div>

        <div class="text" _v-34cd3954="" _v-6f58f7a2="">
            <textarea placeholder="按 Ctrl + Enter 发送" _v-34cd3954="" id="sendText"></textarea>
            <div class="submit">
                <a href="javascript:sendMsg()" class="button button-block">发 送</a>
            </div>
        </div>
    </div>
    
    <div>
    	账　号:<input type="text" name="sendUser" id="sendUser"/> 
			<input type="button" id="login" value="登录" onclick="login()"/> 
			<input type="button" onclick="closeWebSocket()"  value="退出"/> 
			在线人数:<font id="count"></font>　　　连接状态:<font id="status"></font>
			
			<br/>
			接收人:<input type="text" name="toUser" id="toUser"/><br/>
		消息框:<br/>
			 <textarea rows="5" cols="5" id="showMsg" name="showMsg" disabled="disabled" style="width: 302px; height: 111px; "></textarea><br/>
		  	 <textarea rows="5" cols="5" id="message" name="sendMsg" style="width: 302px; height: 111px; "></textarea><br/>
		<input type="button" value="发送" onclick="send()"/>　<input type="button" value="关闭" onclick="closeWebSocket()"/>
    </div>
</div>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/qq/js/message.js"></script>

<script type="text/javascript">
 </script>
</body>

</html>
